<template>
    <!-- 列表 -->
    <div>
        <el-row justify="space-between" class="mb-15px">
            <el-col :span="18">
                <el-button type="primary" @click="openForm('新增')" v-hasPermi="['beidaMeeting:saveOrUpdate']">
                    创建会议
                </el-button>
            </el-col>
            <el-col :span="6">
                <el-input v-model="meetingName" style="width: 100%;" clearable placeholder="搜索">
                    <template #prefixS>
                        <Icon icon="ep:search" />
                    </template>
                </el-input>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="list" row-key="id"   header-cell-class-name="custom-header" stripe>
            <el-table-column align="center" :show-overflow-tooltip="true" label="会议名称" prop="meetingName" width="350" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="发起时间" prop="createTime" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="被呼人员" prop="userNames" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="未接通人员" prop="notUserNames" />
            </el-table>
        <!-- 分页 -->
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
            @pagination="getList" />
    </div>
</template>
<script lang="ts" setup>
import * as MeetingApi from '@/api/infoArrive/teleMeeting/index'

defineOptions({ name: 'createMeeting' })
const emit = defineEmits(['openForms'])
const meetingName = ref('')
const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10
})

/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await MeetingApi.getMeeting({ ...queryParams, meetingName: meetingName.value })
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: String) => {
    emit('openForms',{type, id ,typeForm:'addMeeting'})
}

/** content */
watch(meetingName, () => {
    queryParams.pageNo = 1;
    getList()
})
defineExpose({ getList }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {
    getList()
})
</script>

<style scoped>
:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}

/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
</style>